<template>
  switch parent border: <el-switch v-model="parentBorder" /> switch child
  border: <el-switch v-model="childBorder" />
  <el-table :data="tableData" :border="parentBorder" style="width: 100%"
            @cell-dblclick="(row,column, cell, event)=>{
                  console.log(row,column,cell,event)
                   cr_colu = column.id
                   cr_row = row.NO
            }"

  >
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2">State: {{ props.row.state }}</p>
          <p m="t-0 b-2">City: {{ props.row.city }}</p>
          <p m="t-0 b-2">Address: {{ props.row.address }}</p>
          <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
          <h3>Family</h3>
          <el-table v-if="props.row.fossil_list.length!=0" :data="props.row.fossil_list" :border="childBorder"
                    @cell-dblclick="(row,column, cell, event)=>{
                  console.log(row,column,cell,event)
                  cr_colu = column.id
                  cr_row = row.id
                  // console.log(cr_colu,cr_row)
            }"
          >
            <el-table-column v-for="column in Object.keys(props.row.fossil_list[0])" :label="column" :prop="column" >
              <template #default="props">
              <el-input  v-if="cr_colu==props.column.id && cr_row==props.row.id" v-model="props.row[column]"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column v-for="column in Object.keys(tableData[0]).filter(item=>item!='fossil_list')" :label="column" :prop="column" >
      <template #default="props">
          <el-input v-if="cr_colu==props.column.id && cr_row==props.row.NO && props.column.label!='NO'" v-model="props.row[column]"></el-input>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const  cr_row =ref()
const  cr_colu =ref()
const parentBorder = ref(false)
const childBorder = ref(false)
const res= require('.././data/stage.json')
const tableData=res.data.results
</script>
